<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <!-- 输入框 -->
        <el-col :span="5" :offset="18">
          <el-input
            placeholder="输入关键词查找"
            clearable
            type="sousuo"
            v-model="search1"
            @clear="getuserlist"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table
        :data="
          FData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
        stripe
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column label="表单ID" prop="form_id"> </el-table-column>
        <el-table-column label="表单名" prop="type_name"> </el-table-column>
        <el-table-column label="申请日期" prop="created_at"></el-table-column>
        <el-table-column label="申请人" prop="applicant_name">
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 确认归还按钮 -->
            <el-button
              type="primary"
              size="mini"
              round
              @click="StopApprove(scope.row)"
              >终止审批</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        // 搜索关键字
        query: "",
      },
      userlist: [],
      formData1: [],
      search1: "",
      total: 0,
      currentPage: 1,
      pageSize: 8,
    };
  },
  created() {
    this.getuserlist();
  },
  methods: {
    async getuserlist() {
      const { data: res } = await this.$http.get(
        "/api/superadmin/selectformrun"
      );
      console.log(res);
      this.userlist = res.data.data;
      this.total = res.data.data.length;
    },
    // 监听  pagesize 改变的事件
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // // 监听 页码值 改变的事件
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 终止审批
    async StopApprove(info) {
      const ConfirmResult = await this.$confirm(
        "此操作将终止审批, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (ConfirmResult !== "confirm") {
        return this.$message.info("已取消终止审批");
      }
      const { data: res } = await this.$http.post(
        "/api/superadmin/stopformrun",
        {
          form_id: info.form_id,
        }
      );
      console.log(res);
      if (res.code !== 200) {
        this.$message.error("终止审批失败！");
      }
      this.$message.success("终止审批成功！");
      this.getuserlist();
    },
    // 搜索
    async search() {
      const { data: res } = await this.$http.post(
        "/api/superadmin/selectbypeople",
        {
          applicant_name: this.queryInfo.query,
        }
      );
      this.userlist = res.data;
    },
  },
  computed: {
    FData1: function () {
      var search1 = this.search1;
      if (search1) {
        return this.userlist.filter(function (dataNews) {
          return Object.keys(dataNews).some(function (key) {
            return String(dataNews[key]).toLowerCase().indexOf(search1) > -1;
          });
        });
      }
      return this.userlist;
    },
  },
};
</script>

<style>
.el-button--goon {
  background: #20b2aa !important;
  color: #fafdfd !important;
  font-size: 14px !important;
}
.el-table-column {
  text-align: center;
}
.el-form-item {
  text-align: center;
}
h3 {
  text-align: center;
}
</style>